<template>
  <div>
    <el-container>
      <el-header >
        <el-menu
          :default-active="this.$route.path"
          :router="true"
          mode="horizontal"
          class="el-menu-demo w"
          background-color="skyblue"
          text-color="#fff"
        
        >
          <span class="logo" @click="$router.push('/home')"
            ><img src="../assets/common/logo.png" alt=""
          /></span>
          <el-menu-item
            v-for="(item, i) in navList"
            :key="i"
            :index="item.name"
          >
            <template slot="title">
              <span> {{ item.navItem }}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main style="padding:0px;height:100%"><router-view></router-view></el-main>
    </el-container>
    <footer>
      <div class="w slogan_w">
            <!-- 标语模块 -->
            <div class="slogan">
                <div>
                    <h3>
                        关于我们
                    </h3>
                </div>
                <div>
                    <h3>
                        旅行服务
                    </h3>
                </div>
                <div>
                  <div class="qrcode">
                    <img src="../assets/common/erweima.png" alt="">
                  </div>
                  <h3>
                        关注我们
                  </h3>
                </div>
            </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name:'myIndex',
  data() {
    return {
      navList: [
        { name: "/home", navItem: "首页" },
        { name: "/broker", navItem: "房屋经纪" },
        { name: "/classify", navItem: "房屋分类" },
        { name: "/aboutUs", navItem: "关于我们" },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}

 footer {
    height: 100px;
}

.slogan_w {
    background-color: #333335;
}

footer .slogan {
    height:100px;
    width: 1393px;
}

footer .slogan>div {
    float: left;
    width: 33%;
    height: 100px;
    line-height: 80px;
    text-align: center;
   
}

footer .slogan h3 {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
}

footer .slogan .qrcode {
   display: inline-block;
    width: 70px;
    height: 70px;
    border: 2px solid #efefef;
    margin-right:20px;
    vertical-align: middle;
}
footer .slogan .qrcode img{
   width: 100%;
    height: 100%;
}

.el-container{
  margin: 0 auto;
  background-color: #ebeef53b;
  .el-header{
    background-color: skyblue;
  }
 
}
/deep/.el-header{
  padding: 0px;
  height: 50px !important;
}
.el-menu-demo {
  position: relative;
  height: 100%;
    padding: 0px 160px;
  border: none !important;

  .logo {
        position: absolute;
    width: 45px;
    height: 45px;
    top: 3px;
    left: 99px;
    cursor: pointer;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }

  /deep/.el-menu-item {
    height: 100%;
    text-decoration: none !important;
    border: none !important;
      line-height: 50px;


    &:hover {
      background: #34466a !important;

      text-decoration: none !important;
      border-bottom: none !important;
      span {
        color: orange;
      }
    }
    span {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      //  &:hover{
      //     color: orange
      //  }
    }
  }
}
</style>